<template>
  <div class="comp-news-item">
    <mu-appbar style="width: 100%;" title="预约用户" color="#009688" />
    <mu-list :nested-indent="false" v-if="data.length">
      <mu-list-item avatar v-for="userItem in data" :key="userItem.id">
        <mu-list-item-action>
          <mu-avatar :color="'#'+ Math.random().toString(16).substr(-6)">{{userItem.name ? userItem.name[0] : '无'}}</mu-avatar>
        </mu-list-item-action>
        <mu-list-item-content>
          <mu-list-item-title>{{userItem.name ? userItem.name[0] + '先生' : '无名氏' }} {{userItem.phone.slice(0, 3) + '****' + userItem.phone.slice(7)}}</mu-list-item-title>
          <mu-list-item-sub-title>
            {{userItem.updatedAt}}
            预约{{userItem.premoney}}万
          </mu-list-item-sub-title>
        </mu-list-item-content>
      </mu-list-item>
    </mu-list>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      default() {
        return []
      }
    }
  }
};
</script>

<style lang="scss">
.comp-news-item {
  .mu-list {
    li {
      // 去除底部边框
      border-bottom: none;
      // 减少内边距
      padding: 5px 8px;
    }
  }
}
</style>
